<style lang="less" scoped>
@import url('../index.less');
</style>

<template>
  <section class="auth">
    <!--logo-->
    <div class="logo">
      <img class="logo-pic" src="/static/images/logo.png" alt="企数查">
      <div class="logo-text">登陆</div>
    </div>
    <!-- form -->
    <div class="auth-content">
      <div class="auth-content__item">
        <i class=" iconfont icon-user" />
        <div class="auth-content__label">用户名</div>
        <div class="auth-content__field">
          <input v-model="params.userName.value" class="auth-content__value" :placeholder-style="placeholderStyle" type="text" placeholder="请输入用户名（6-20位英文数字）">
        </div>
      </div>
      <div class="auth-content__item">
        <i class=" iconfont icon-mima" />
        <div class="auth-content__label">密码</div>
        <div class="auth-content__field">
          <input v-model="params.password.value" class="auth-content__value" :placeholder-style="placeholderStyle" type="password" placeholder="请输入密码（6-20位英文数字）">
        </div>
      </div>
    </div>
    <div class="auth-link">
      <div @click="toRegister">没有注册？马上注册</div>
    </div>
    <!-- button -->
    <div class="auth-submit">
      <van-button size="large" @click="submit">登陆</van-button>
    </div>
  </section>
</template>

<script>
import Load from '@/components/load';

const sleep = async (duration = 2000) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, duration);
  });
};

export default {
  components: {
    Load
  },
  data() {
    return {
      params: {
        userName: {
          value: '',
          label: '用户名',
          reg: /^[a-zA-Z0-9]{6,20}$/ //6-20英文数字
        },
        password: {
          value: '',
          label: '密码',
          reg: /^[a-zA-Z0-9]{6,20}$/ //6-20英文数字
        }
      },
      pms: {},
      placeholderStyle: 'color:#ddd;'
    };
  },
  computed: {
    loading() {
      // 全局loading状态
      return this.$store.getters.loading;
    }
  },
  methods: {
    toRegister() {
      let query = this.$route.query;

      this.$router.push({
        path: '/pages/auth/register/main',
        query
      });
    },
    async submit() {
      // if (this.loading) return;

      // 提交
      let params = this.params;
      const pms = {};

      for (let key in params) {
        let item = params[key];
        //  空字符校验
        if (!/\S/.test(item.value)) {
          wx.showToast({
            title: `${item.label}不能为空！`,
            icon: 'none',
            duration: 2000
          });
          return;
        }

        // 正则校验
        // if (!item.reg.test(item.value)) {
        //   wx.showToast({
        //     title: `${item.label}不正确！`,
        //     icon: 'none',
        //     duration: 2000
        //   });
        //   return;
        // }

        pms[key] = item.value;
      }

      const url = '/api/user/login';
      const { status, message, data } = await this.$http.post(url, pms);

      if (status !== 0) {
        wx.showToast({
          title: message || '查询失败！',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      wx.showToast({
        title: '登陆成功',
        icon: 'none',
        duration: 2000
      });

      await sleep();

      this.$store.commit('setUserInfo', data);
      let query = this.$route.query;

      this.$router.push({
        path: query.path || '/pages/index/main',
        query
      });
    }
  },
  onLoad() {
    // 页面挂载初始化
  },
  onUnload() {
    // 清除数据缓存
  }
};
</script>